<!--
	Icons: 
	Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Escape From Zombie Town</title>
</head>

<body style="user-select:none;">
	<div id="card"
		style="left:200px;top:100px;width:300px;height:500px;border-radius:20px;border:2px solid #000;background-image:url();background-size: cover;">
	</div>
	<div id="cardReadme"
		style="left:600px;top:100px;width:300px;height:500px;border-radius:20px;border:2px solid #000;background-image:url();background-size: cover;">
	</div>

	<div id="tokenHealth"
		style="left:170px;top:115px;width:20px;height:20px;border-radius:2.5px;background-color:#C24C;"></div>
	<div id="tokenFuel" style="left:120px;top:527px;width:20px;height:20px;border-radius:2.5px;background-color:#EC7C;">
	</div>
	<div id="tokenAmmu" style="left:145px;top:527px;width:20px;height:20px;border-radius:2.5px;background-color:#445C;">
	</div>
	<div id="tokenGoods"
		style="left:170px;top:527px;width:20px;height:20px;border-radius:2.5px;background-color:#2CEC;"></div>

	<div id="meeple" style="left:335px;top:340px;">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="50"
			fill="#485"><path
	d="M112 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm40 304V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V256.9L59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l58.3-97c17.4-28.9 48.6-46.6 82.3-46.6h29.7c33.7 0 64.9 17.7 82.3 46.6l58.3 97c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9L232 256.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V352H152z" /></svg>
	</div>

	<div id="dicePlayer" style="left:516px;top:320px;" dice="6">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="50" height="50"
			fill="#CCC"><path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM352 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM352 160a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64-64a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32 160a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" /></svg>
	</div>
	<div id="diceFuel" style="left:247px;top:40px;" dice="6">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="50" height="50"
			fill="#EC7"><path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM352 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM352 160a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64-64a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32 160a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" /></svg>
	</div>
	<div id="diceAmmu" style="left:335px;top:40px;" dice="6">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="50" height="50"
			fill="#445"><path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM352 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM352 160a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64-64a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32 160a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" /></svg>
	</div>
	<div id="diceGoods" style="left:425px;top:40px;" dice="6">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="50" height="50"
			fill="#2CE"><path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM352 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM352 160a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
<path
	d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM96 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM224 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64-64a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32 160a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
<path
	d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm160 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 192a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" /></svg>
	</div>

	<div style="left:520px;top:115px;width:50px;height:50px;border-radius:2.5px;padding:5px;background-color:#445;color:#FFF;"
		onclick="setup()">简单 EASY</div>
	<div style="left:520px;top:185px;width:50px;height:50px;border-radius:2.5px;padding:5px;background-color:#C24;color:#FFF;"
		onclick="setup(true)">困难 HARD</div>
</body>
<script>let pieceApi = {}

function makePiece(piece) {
	piece.draggable = 'true'
	piece.style.position = 'absolute'

	piece.onmousedown = function (e) {
		e = e || window.event
		e.preventDefault()
		let posX = e.clientX
		let posY = e.clientY
		document.onmouseup = function (e) {
			e = e || window.event
			e.preventDefault()
			document.onmouseup = null
			document.onmousemove = null
		}
		document.onmousemove = function (e) {
			e = e || window.event
			e.preventDefault()
			let deltaPosX = e.clientX - posX
			let deltaPosY = e.clientY - posY
			posX = e.clientX
			posY = e.clientY
			piece.style.left = (piece.offsetLeft + deltaPosX).toFixed(0) + 'px'
			piece.style.top = (piece.offsetTop + deltaPosY).toFixed(0) + 'px'
		}
	}

	piece.ontouchstart = function (e) {
		e = e || window.event
		e.preventDefault()
		let posX = e.touches[0].clientX
		let posY = e.touches[0].clientY
		console.log(posX, posY)
		document.ontouchend = function (e) {
			e = e || window.event
			e.preventDefault()
			document.ontouchend = null
			document.ontouchmove = null
		}
		document.ontouchmove = function (e) {
			e = e || window.event
			e.preventDefault()
			let deltaPosX = e.touches[0].clientX - posX
			let deltaPosY = e.touches[0].clientY - posY
			posX = e.touches[0].clientX
			posY = e.touches[0].clientY
			piece.style.left = (piece.offsetLeft + deltaPosX).toFixed(0) + 'px'
			piece.style.top = (piece.offsetTop + deltaPosY).toFixed(0) + 'px'
		}
	}

	if (piece.id) {
		if (typeof pieceApi[piece.id] !== 'object')
			pieceApi[piece.id] = {}
		pieceApi[piece.id].moveTo = function (x, y) {
			piece.style.left = x.toFixed(0) + 'px'
			piece.style.top = y.toFixed(0) + 'px'
		}
	}
}

function makeDice6(piece) {
	let number = 0
	let faces = piece.children[0].children
	let faceCount = faces.length
	function displayNumber() {
		for (let i = 0; i < faceCount; ++i)
			faces[i].style.display = (i == number) ? '' : 'none'
	}
	displayNumber()

	piece.ondblclick = function (e) {
		e = e || window.event
		e.preventDefault()
		function roll(times) {
			if (times <= 0) return
			number = Math.floor(Math.random() * faceCount)
			displayNumber()
			setTimeout(function () { roll(times - 1) }, 100)
		}
		roll(10)
	}

	piece.oncontextmenu = function (e) {
		e = e || window.event
		e.preventDefault()
		if ((++number) >= faceCount)
			number = 0
		displayNumber()
	}

	if (piece.id) {
		if (typeof pieceApi[piece.id] !== 'object')
			pieceApi[piece.id] = {}
		pieceApi[piece.id].setNumber = function (n) {
			number = n
			displayNumber()
		}
	}
}

let pieces = document.body.children
let pieceCount = pieces.length
for (let i = 0; i < pieceCount; ++i) {
	let piece = pieces[i]
	makePiece(piece)
	if (piece.getAttribute('dice') == '6')
		makeDice6(piece)
}</script>
<script>function setup(hard = false) {
	pieceApi.card.moveTo(200, 100)
	pieceApi.tokenHealth.moveTo(170, 115)

	let healthY = hard ? 341 : 115
	pieceApi.tokenHealth.moveTo(170, healthY)

	let resourceY = hard ? 568 : 527
	pieceApi.tokenFuel.moveTo(120, resourceY)
	pieceApi.tokenAmmu.moveTo(145, resourceY)
	pieceApi.tokenGoods.moveTo(170, resourceY)

	pieceApi.meeple.moveTo(335, 340)

	pieceApi.dicePlayer.moveTo(516, 320)
	pieceApi.dicePlayer.setNumber(0)
	pieceApi.diceFuel.moveTo(247, 40)
	pieceApi.diceFuel.setNumber(0)
	pieceApi.diceAmmu.moveTo(335, 40)
	pieceApi.diceAmmu.setNumber(0)
	pieceApi.diceGoods.moveTo(425, 40)
	pieceApi.diceGoods.setNumber(0)
}</script>

</html>